<template>
    <div>
        <Modal v-model="isShowModal" :title="title" @on-cancel="hide()" :mask-closable="false" width="950">

            <Divider orientation="left">订单信息</Divider>
            <Row :gutter="16">
                <Col span="8">
                    <div>订单编号：{{orderInfo.orderMall.mallOrderCode}}</div>
                </Col>
                <Col span="16">
                    <div>订单标题：{{orderInfo.orderMall.orderTitle}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>下单账号：{{orderInfo.orderMall.username}}</div>
                </Col>
                <Col span="8">
                    <div>下单昵称：{{orderInfo.orderMall.nickName}}</div>
                </Col>
                <Col span="8">
                    <div>订单总额：￥{{orderInfo.orderMall.totalAmount}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>商品总额：￥{{orderInfo.orderMall.totalGoods}}</div>
                </Col>
                <Col span="8">
                    <div>赠送知豆：{{orderInfo.orderMall.integral}}个</div>
                </Col>
                <Col span="8">
                    <div>运费总额：￥{{orderInfo.orderMall.totalFreight}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>
                        订单状态：
                        <template v-if="orderInfo.orderMall.orderState == 1">待付款</template>
                        <template v-if="orderInfo.orderMall.orderState == 2">待发货</template>
                        <template v-if="orderInfo.orderMall.orderState == 3">待收货</template>
                        <template v-if="orderInfo.orderMall.orderState == 4">已完成</template>
                        <template v-if="orderInfo.orderMall.orderState == 5">交易关闭</template>
                    </div>
                </Col>
                <Col span="8">
                    <div>更新时间：{{orderInfo.orderMall.updateTime}}</div>
                </Col>
                <Col span="8">
                    <div>创建时间：{{orderInfo.orderMall.createTime}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>付款时间：{{orderInfo.orderMall.paySuccessTime ? orderInfo.orderMall.paySuccessTime :'-'}}</div>
                </Col>
                <Col span="8">
                    <div>
                        用户订单删除状态：
                        <template v-if="orderInfo.orderMall.isDeleteUser == 0">未删除</template>
                        <template v-if="orderInfo.orderMall.isDeleteUser == 1">已删除</template>
                    </div>
                </Col>
                <Col span="8">
                    <div>操作管理员：{{orderInfo.orderMall.operatorName ? orderInfo.orderMall.operatorName: '-'}}</div>
                </Col>
            </Row>
            <Divider orientation="left">支付信息</Divider>
            <Row :gutter="16">
                <Col span="8">
                    <div>余额抵扣：￥{{orderInfo.orderMall.balanceDeduction?orderInfo.orderMall.balanceDeduction:'0.00'}}</div>
                </Col>
                <Col span="8">
                    <div>支付方式：
                        <template v-if="orderInfo.orderMall.payMethod == 'alipay'">支付宝支付</template>
                        <template v-if="orderInfo.orderMall.payMethod == 'wechat'">微信支付</template>
                        <template v-if="!orderInfo.orderMall.payMethod">-</template>
                    </div>
                </Col>
                <Col span="8">
                    <div>支付金额：￥{{orderInfo.orderMall.payAmount?orderInfo.orderMall.payAmount:'0.00'}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="24">
                    <div>交易流水号：{{orderInfo.orderMall.payNo?orderInfo.orderMall.payNo:'-'}}</div>
                </Col>
            </Row>

            <Divider orientation="left">物流信息</Divider>
            <Row :gutter="16">
                <Col span="8">
                    <div>收货人姓名：{{orderInfo.mallLogistics.consigneeName}}</div>
                </Col>
                <Col span="8">
                    <div>收货人手机号：{{orderInfo.mallLogistics.consigneePhone}}</div>
                </Col>
                <Col span="8">
                    <div>收货人地址：{{orderInfo.mallLogistics.consigneeAddress}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>物流公司：{{orderInfo.mallLogistics.logisticsName ? orderInfo.mallLogistics.logisticsName:'-'}}
                    </div>
                </Col>
                <Col span="8">
                    <div>物流公司代码：{{orderInfo.mallLogistics.logisticsCode ? orderInfo.mallLogistics.logisticsCode:'-'}}
                    </div>
                </Col>
                <Col span="8">
                    <div>物流单号：{{orderInfo.mallLogistics.logisticsNum ? orderInfo.mallLogistics.logisticsNum:'-'}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>发货时间：{{orderInfo.mallLogistics.sendTime ? orderInfo.mallLogistics.sendTime:'-'}}</div>
                </Col>
                <Col span="16">
                    <div>收货时间：{{orderInfo.mallLogistics.getTime ? orderInfo.mallLogistics.getTime:'-'}}</div>
                </Col>
            </Row>
            <Divider orientation="left">商品信息</Divider>
            <Row v-for="(item,index) in orderInfo.itemList">
                <Col span="24">
                        <div class="j-order-image">
                            <div class="j-order-image-main">
                                <img :src="item.goodsImages">
                            </div>
                            <div class="j-order-image-info">
                                <div class="j-order-goods-title">{{item.goodsName}}</div>
                                <div class="j-order-goods-sku" v-if="item.goodsSku && item.goodsSku.specValue">规格：{{item.skuInfo.specValue}}</div>
                                <div class="j-order-goods-price">价格：{{item.goodsPrice}}元</div>
                                <div class="j-order-goods-num">数量：{{item.goodsNum}}</div>
                            </div>
                        </div>
                    <!-- </template> -->
                </Col>
            </Row>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide('formValidate')">取消</Button>
                <Button type="primary" @click="hide()" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "order-ope",
        data() {
            return {
                isShowModal: false,
                loadingBtn: false,
                orderInfo: {
                    orderMall: {},
                    mallLogistics: {},
                    logistics: ''
                },
                goodsSkuInfo: {},
                title: '订单详情'
            }
        },
        methods: {
            // 显示模态框
            show(row) {
                this.isShowModal = true;
                this.getOrderMallById(row);
            },
            // 查询订单详情
            getOrderMallById(row) {
                this.$Spin.show();
                this.axios.post('/orderMall/getOrderMallById', {
                    mallOrderId: row.mallOrderId
                }).then(res => {
                    console.log(res);
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        this.orderInfo = res.data;
                        if (res.data.orderMall.goodsSku) {
                            this.goodsSkuInfo = JSON.parse(res.data.orderMall.goodsSku);
                        }
                        if (res.data.orderMall.goodsSku) {
                            this.goodsSkuInfo = JSON.parse(res.data.orderMall.goodsSku);
                        }
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看订单详情接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            }
        }
    }
</script>

<style scoped lang="less">
    .j-order-image {
        display: flex;

        .j-order-image-main {
            width: 130px;
            height: 130px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .j-order-image-info {
            margin-left: 10px;

            .j-order-goods-sku {
                margin-top: 5px;
            }

            .j-order-goods-price {
                margin-top: 5px;
            }

            .j-order-goods-num {
                margin-top: 5px;
            }
        }
    }

</style>